<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
// selection
var Reused = {	
  selectedIndex : 'Tab1', 
  select : function(someId) {
	this.selectedIndex = someId;
  }
};
</script>

<!-- in-line taglibrary, in real life can be in separate file -->
<script id="taglibInline" type="text/html">
<taglib>
<tag id="tabheader">
	<div class="tabheader #{$selector.selectedIndex == '$tabId' ? 'tabheaderselected' : ''}">
		<a class="title" href="#" onclick="#{$selector.select('$tabId')}">$tabId</a>
	</div>
</tag>
<tag id="tabbody">
	<div rendered="#{$selector.selectedIndex == '$tabId'}" />
</tag>
</taglib>
</script>

<!-- Compact tab container -->
<div id="Reused" >
<script type="text/html">
<div class="tabcontainer" xmlns:tabs="page:taglibInline">
	<div class="tabs">
		<!-- look at the tags -->
		<tabs:tabheader selector=".Reused" tabId="Tab1"/>
		<tabs:tabheader selector=".Reused" tabId="Tab2"/>
		<tabs:tabheader selector=".Reused" tabId="Tab3"/>
	</div>
	<div class="clear"></div>
	<div class="tabbody" style="height:200px">
		<tabs:tabbody selector=".Reused" tabId="Tab1">
			Content of Tab1
		</tabs:tabbody>
		<tabs:tabbody selector=".Reused" tabId="Tab2">
			Content of Tab2
		</tabs:tabbody>
		<!-- inside the tab you can add any content: tags, texts ... -->
		<tabs:tabbody selector=".Reused" tabId="Tab3">
			<span>Content of Tab3</span>
		</tabs:tabbody>
	</div>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Reused'); 
	// bind model
	gnatooContext.data['Reused'] = Reused;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


